<template>
  <div class="trade">
    <!-- 头部 -->
    <div class="trading_head">
      <div class="left" @click="openLeft">
        <img src="../../assets/t_right.png" alt />
        <span>{{coindui}}</span>
      </div>
      <div class="right">
        <img class="ns1" src="../../assets/t_center.png" alt />
        <img @click="showTc" class="ns2" src="../../assets/t_left.png" alt />
      </div>
    </div>
    <!-- 内容 -->
    <div class="trading_content">
      <div class="mrmc">
        <div class="left">
          <div class="ns1">
            <div class="mr_btn mc_btn1" @click="qhmm(1)" :class="{active:isActive}">买入</div>
            <div class="mc_btn" @click="qhmm(2)" :class="{active:!isActive}">卖出</div>
          </div>
          <div class="num_add">
            <div class="jian_cny" @click="dec1">-</div>
            <div>|</div>
            <div class="sl" v-if="isActive">
              <input
                v-model="price1"
                @change="getpriceusdt()"
                style="padding-left:.2rem;width:100%"
                type="number"
                placeholder="价格 USDT"
              />
            </div>
            <div class="sl" v-if="!isActive">
              <input
                v-model="price"
                @change="getpriceusdt()"
                style="padding-left:.2rem;width:100%"
                type="number"
                placeholder="价格 USDT"
              />
            </div>
            <div>|</div>
            <div class="add_cny" @click="add1">+</div>
          </div>
          <p class="cny"></p>
          <!-- <p class="cny">≈{{tocny}}CNY</p> -->
          <div class="num_add1">
            <div class="jian_cny1" @click="dec2">-</div>
            <div>|</div>
            <div class="sl1" v-if="isActive">
              <input
                v-model="balance11"
                @change="getnumberusdt()"
                style="padding-left:.2rem;width:100%"
                type="number"
                :placeholder="'数量 '+title"
              />
            </div>
            <div class="sl1" v-if="!isActive">
              <input
                v-model="balance1"
                @change="getnumberusdt()"
                style="padding-left:.2rem;width:100%"
                type="number"
                :placeholder="'数量 '+title"
              />
            </div>
            <div>|</div>
            <div class="add_cny1" @click="add2">+</div>
          </div>

          <div style="color:#10131e;text-align:left;margin-top:.32rem;min-width: 110%;">
            <span style="color:#7e87a2;font-size:.34rem">可用&nbsp;&nbsp;</span>
            <span style="font-size:bold;font-size:.44rem" v-if="!isActive">{{balance2}}</span>
            <span style="font-size:bold;font-size:.44rem" v-if="isActive">{{balance2s}}</span>
            <span style="font-size:.44rem">{{title}}</span>
          </div>

          <div class="sl_mx" v-if="isActive">
            <a-slider
              :tooltipVisible="false"
              :marks="markss"
              v-model="balance11"
              :max="marks11"
              :disabled="disabled"
              :defaultValue="0"
            />
          </div>
          <div class="sl_mx" v-if="!isActive">
            <a-slider
              :tooltipVisible="false"
              :marks="marks"
              v-model="balance1"
              :max="marks1"
              :disabled="disabled"
              :defaultValue="0"
            />
          </div>
          <p v-if="isActive" class="reveal">
            0
            <span>{{balance11}}{{title2}}</span>
          </p>
          <p v-if="!isActive" class="reveal">
            0
            <span>{{balance1}}{{title2}}</span>
          </p>
          <div v-if="isActive" style="color:#10131e;text-align:left;margin-top:.32rem;">
            <span style="color:#7e87a2;font-size:.34rem">交易额&nbsp;&nbsp;</span>
            <span style="font-size:bold;font-size:.44rem">{{usdtnumbers}}</span>
            <span style="font-size:.44rem">USDT</span>
          </div>
          <div v-if="!isActive" style="color:#10131e;text-align:left;margin-top:.32rem;">
            <span style="color:#7e87a2;font-size:.34rem">交易额&nbsp;&nbsp;</span>
            <span style="font-size:bold;font-size:.44rem">{{usdtnumber}}</span>
            <span style="font-size:.44rem">USDT</span>
          </div>
          <div class="usdt_mr" v-if="isShow" @click="buyin(1)">买入{{title2}}</div>
          <div class="usdt_mr usdt_mr1" v-if="!isShow" @click="buyin(2)">卖出{{title2}}</div>
        </div>
        <div class="right">
          <div class="ns1">
            <span></span>
            <span>价格</span>
            <span class="r_text" style="text-align: right">数量</span>
          </div>
          <div class="jg_list" v-for="(item, index) in buy" :key="index">
            <div class="ws1">
              <span class="sl">{{index+1}}</span>
              <span class="jg">{{item.price}}</span>
              <span class="r_text sl sltexe1">{{item.allnumber}}</span>
            </div>
          </div>
          <div class="us_ze" style="text-align:left">
            <span style="color:black;">{{mini}}</span>
          </div>
          <div
            style="color:#999999;font-size: 14px;margin: .04rem 0 .6rem;text-align:left"
          >≈{{mini_cny}} CNY</div>
          <div class="jg_list" v-for="(item, index) in sell" :key="index">
            <div class="ws1">
              <span class="sl">{{index+1}}</span>
              <span class="jg jg1">{{item.price}}</span>
              <span class="r_text sl sltexe1">{{item.allnumber}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height:.133333rem;background: #E6E6E6"></div>
    <!-- 下面 -->
    <div class="trading_content">
      <div class="wt_head">
        <span>当前委托</span>
        <router-link to="entrust">全部</router-link>
      </div>
      <!-- <div class="wt_top">
				 <div class="xjwt active">限价委托</div>
				 <div class="jhwt">计划委托</div>
      </div>-->
    </div>
    <div style="height:1px;background: #E6E6E6"></div>
    <!-- 结束 -->

    <div class="xjwt_block">
      <div class="sx_block" v-if="is_Show1">
        <div style="padding-top: 50px;padding-bottom: 50px">
          <img style="width:3.4rem" src="../../assets/zwsj1.png" alt />
          <p style="text-align: center;font-size:16px;color:#7e87a2;margin-top:10px">暂无数据</p>
        </div>
      </div>
      <div class="wt_block" v-if="is_Show" v-for="(item, index) in items" :key="index">
        <div class="head">
          <div class="head_left">
            <span class="nsb2" v-if="item.type == 1">买入</span>
            <span class="nsb1" v-else-if="item.type == 2">卖出</span>
            &nbsp;
            <span class="ns2">{{item.ftype}}</span>&nbsp;
            <!-- <span class="ns3">{{item.createtime | formatDate}}</span>&nbsp; -->
            <span class="ns4">{{item.createtime | formatDate1}}</span>
          </div>
          <div class="head_right">
            <span v-if="item.status == 1 && item.sum == 0">
              <button type="button" @click="cancellations(item.id)">撤单</button>
              未成交
            </span>
            <span v-else-if="item.status == 1 && item.sum > 0">
              <button type="button" @click="cancellations(item.id)">撤单</button>部分成交</span>
            <span v-else-if="item.status == 2">完全成交</span>
            <img src="../../assets/r_jt.png" alt />
          </div>
        </div>
        <div class="content1">
          <div class="ns1">
            <p class="ws1">委托价格(USDT)</p>
            <p class="ws2">{{item.price}}</p>
          </div>
          <div class="ns2">
            <p class="ws1">委托数量({{item.lefttype}})</p>
            <p class="ws2">{{item.allnumber}}</p>
          </div>
          <div class="ns3">
            <p class="ws1">成交额(USDT)</p>
            <p class="ws2">{{item.sum}}</p>
          </div>
        </div>
        <div class="content2">
          <div class="ns1">
            <p class="ws1">成交均价(USDT)</p>
            <p class="ws2">{{item.avgprice}}</p>
          </div>
          <div class="ns2">
            <p class="ws1">成交数量(BBZ)</p>
            <p class="ws2">{{item.sum}}</p>
          </div>
          <div class="ns3">
            <p class="ws1">成交笔数</p>
            <p class="ws2">{{item.count}}</p>
          </div>
        </div>
      </div>
    </div>

    <p class="pull" v-if="is_Show">{{newxin}}</p>

    <div class="nav-bg" v-show="isPoup" @click="closeLeft"></div>
    <div class="nav-box" :style="{left:isLeft}">
      <div class="nav-content">
        <div class="title">
          <div class="left" :class="{actions:isClass}" @click="toClass1">USDT</div>
          <div class="right">
            <span @click="toClass2" :class="{actions:!isClass}">自选</span>
            <img @click="closeLeft" src="../../assets/t_right.png" alt />
          </div>
        </div>
        <div class="mxx_list" v-for="(item, index) in coin" :key="index">
          <router-link
            :to="{
                            path: 'trade',
                            params: {
                                title: item.title, // orderNum : this.searchData.orderNo
                                content: item.content,
                                types: item.types,
                            },
                            query: {
                                title: item.title, // orderNum : this.searchData.orderNo
                                content: item.content,
                                types: item.types,
                            }
                        }"
          >
            <div
              class="mxx_block"
              :style="{background:iscolor}"
              @click="qh_bz(item.title,item.content,item.types)"
            >
              <div>{{item.title}}</div>
              <div>{{item.last}}</div>
              <div style="color:#10131e;font-size:13px">{{item.percentChange}}%</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="wswc" v-if="show" @click="showTc"></div>
    <div class="m-megess" v-if="show">
      <a href="javascript:;" @click="msg" style="text-decoration: none;">
        <div class="m-block" id="shsq">
          <img src="../../assets/zh-list1.png" alt />
          <span>充币</span>
        </div>
      </a>
      <router-link to="/transfer" style="text-decoration: none;">
        <div class="m-block">
          <img src="../../assets/zh-list2.png" alt />
          <span>划转</span>
        </div>
      </router-link>
    </div>
    <div style="height:1.333333rem"></div>
    <Tabbar :idx="1" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/public/Tabbar.vue";
import { setInterval, clearInterval, setTimeout } from "timers";
import { constants } from 'crypto';
export default {
  name: "asset",
  components: {
    Tabbar
  },
  data() {
    // console.log(a-slider, "第一");
    return {
      marks: { 20: "", 40: "", 60: "", 80: "" },
      markss: { 20: "", 40: "", 60: "", 80: "" },
      marks1: 0,
      coindui: "",
      isClass: true,
      isActive: true,
      isShow: true,
      is_Show: true,
      is_Show1: false,
      newxin: "下拉更新",
      isPoup: false,
      isLeft: "-80%",
      show: false,
      getwidth: "0",
      iscolor: "transparent",
      price: 0,
      price1: 0,
      price2: 0,
      price1: 0,
      number: 0,
      buy: [],
      sell: [],
      mini: 0,
      mini_cny: 0,
      usdt_cny: 0,
      tocny: 0,
      balance: "0",
      balance1: "0",
      balance2: "0",
      balance11: "0",
      balance1s: 0,
      balance2s: 0,
      count: 0.0,
      items: [],
      coin: [],
      title: "USDT",
      title1: "",
      title2: "",
      ttype: "",
      types: "2/1",
      formatDate1: "",
      value1: "",
      max: 100,
      disabled: true,
      page: 1,
      usdtnumber: "",
      usdtnumbers: "",
      tempros:""
    };
  },
  beforeCreate() {
    //console.log(location.hash.split("?")[0]);
    location.hash = location.hash.split("?")[0];
  },
  created: function() {
    var ts=this;
    this.ws = new WebSocket("ws://47.106.102.130:3388");
    this.ws.onopen = function() {
        console.log("连接成功");
    };
    this.ws.onmessage = function(e) {
        console.log("收到服务端的消息：" + e.data);
        ts.getbuyDate(ts.types);
        ts.getsellDate(ts.types);
        console.log("发送请求")

    };
    ////////////////////

    var dtime = setInterval(() => {
      document.getElementsByClassName("el-slider__button-wrapper")[0]
        ? ((document.getElementsByClassName(
            "el-slider__button-wrapper"
          )[0].style.zIndex = 0),
          clearInterval(dtime))
        : "";
    }, 1);

    let types = this.$route.query.types;
    let title = this.$route.query.title;
    if (types) {
      //console.log(this.isActive, "title-value");

      this.isActive ? (this.title = title) : (this.title = this.title1);
      this.ttype = title;
    }

    if (this.$route.query.content) {
      this.coindui = this.$route.query.content;
      this.ttype = title;
    } else {
      this.coindui = "";
    }
    // //console.log(this.types)
    this.getcoin(types);
    this.getbuyDate(types);
    this.getsellDate(types);
    this.getDate();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    msg() {
      this.$createToast({ txt: "请到OTC交易", type: "txt", time: 1200 }).show();
    },
    qh_bz(title, content, types) {
      this.types = types;
      this.isActive ? (this.title = this.title1) : (this.title = title);
      this.ttype = title;
      this.title2 = title;
      this.coindui = content;
      for (var i = 0; i < this.coin.length; i++) {
        if (this.coin[i].types == types) {
          this.max10 = this.coin[i].last;
          this.price = this.coin[i].last;
        }
      }
      // //console.log(this.types)
      this.getbuyDate(this.types);
      this.getsellDate(this.types);

      this.isActive
        ? this.getbalanceDate(this.types)
        : this.getbalanceDate("", this.types);

      this.isLeft = "-80%";
      this.isPoup = false;
    },
    getcoin(type2) {
      this.$axios.post("/index/buy/getcoin", {}).then(res => {
        if (res.data.code == 0) {
          if (res.data.info.length > 0) {
            this.coin = res.data.info;
            this.coindui = this.coin[0].content;
            //console.log(this.isActive, "判断--");
            this.title1 = this.coin[0].titleleft;
            this.title2 = this.coin[0].title;
            this.isActive
              ? (this.title = this.coin[0].titleleft)
              : (this.title = this.coin[0].title);
            this.ttype = this.coin[0].title;
            this.price = this.coin[0].last;
            this.getbalanceDate(type2);
          }
        }
      });
    },
    getbuyDate(types) {

      if (!types) {
        types = "2/1";
      }

      this.$axios
        .post("/index/buy/newestPriceNumber", { fieldtype: types, type: 1 })
        .then(res => {
          //console.log(res);
          if (res.data.code == 0) {
            if (res.data.info.length > 0) {
              this.buy = res.data.info;
              // this.price = res.data.info[0].price;
              // this.price1 = res.data.info[0].price;

              // this.mini_cny = res.data.mini;
            }
          } else {
            this.buy = [];
          }
          res.data.mini=parseInt(Number(res.data.mini)*10000)/10000;
          var tempro=res.data.mini;
          this.mini = res.data.mini;
          this.tempros?clearInterval(this.tempros):'';
          this.tempros=setInterval(()=>{
            var temnum=parseInt(Math.random()*3)-1
            temnum=temnum/10000;
            // console.log(temnum,"随机数")
            this.mini=parseInt(Number(tempro+temnum)*10000)/10000;
          },1500)
          this.$axios.post("/index/apihq/usdt_cny", {}).then(ress => {
            //console.log(ress);
            if (ress.data.code == 0) {
              this.mini_cny = ress.data.val * this.mini;
              this.usdt_cny = ress.data.val;
            }
          });
        });
    },
    getsellDate(types) {
      // //console.log(types)
      if (!types) {
        types = "2/1";
      }

      this.$axios
        .post("/index/buy/newestPriceNumber", { fieldtype: types, type: 2 })
        .then(res => {
          //console.log(res);
          if (res.data.code == 0) {
            if (res.data.info.length > 0) {
              this.sell = res.data.info;
              this.price2 = res.data.info[0].price;
            }
          } else {
            this.sell = [];
          }
        });
    },
    getbalanceDate(types, sell) {
      //console.log(types, sell, "money--request");
      var type1 = "";
      if (sell) {
        type1 = parseInt(sell.split("/")[0]);
      } else {
        if (!types) {
          types = "2/1";
          //console.log("下次安心");
        }
        //console.log(types, "判断");
        type1 = parseInt(types.split("/")[1]);
      }
      //console.log(type1, "请求money的---");
      this.$axios
        .post("/index/asset/crubalance", { btype: 2, ftype: type1 })
        .then(res => {
          //console.log(res.data, "vuelads");
          if (res.data.code == 0) {
            // res.data.info=134.23423423
            console.log(res.data.info, '-value-');
            this.balance = parseInt(Number(res.data.info) * 10000) / 10000;
            this.balance1 = Number(this.balance);
            this.balance1>0?"":this.balance1=0;
            this.balance2=this.balance1;
            this.marks1 = this.balance2;

            this.balance2 = parseInt(Number(this.balance2) * 100) / 100;

            this.price = parseInt(Number(this.price) * 10000) / 10000;
            this.price1 = parseInt(Number(this.price) * 10000) / 10000;
            this.prices = this.price;

            console.log(this.balance2,' ll ', this.price)
            var turn1 = Number(this.balance2)/Number(this.price);

            // turn1.indexOf(".") != -1
            //   ? (this.balance11 = turn1.substring(0, turn1.indexOf(".") + 3))
            //   : (this.balance11 = turn1);
            console.log(turn1,'可考虑')
            this.balance11 = parseInt(Number(turn1) * 10000) / 10000;

            this.marks11 = this.balance11;
             console.log(this.marks11,'--看看')
            this.balance>0?this.balance2s = this.balance:
            this.balance2s =0;

            this.max10 = this.price;

            this.max11 = this.balance1;

            this.max = Number(this.balance) * Number(this.price);

            this.number = this.max;
            this.balance > 1 ? (this.disabled = false) : (this.disabled = true);

            if (this.max11 > 0) {
              var sk1 = `{"${this.max11 * 0.2}":"","${this.max11 *
                0.4}":"","${this.max11 * 0.6}":"","${this.max11 * 0.8}":""}`;
              this.marks = JSON.parse(sk1);
            }
            if (this.balance11 > 0) {
              var sk11 = `{"${this.balance11 * 0.2}":"","${this.balance11 *
                0.4}":"","${this.balance11 * 0.6}":"","${this.balance11 *
                0.8}":""}`;
              this.markss = JSON.parse(sk11);
              //console.log(this.markss, "的");
            }
            this.balance1 = 0;
            this.balance11 = 0;
          } else {
            this.balance = 0;
            this.balance1 = 0;
            this.balance11 = 0;
            this.balance2 = 0;
            this.balance2s = 0;
            this.max = 100;
            this.number = 0;
            this.disabled = true;

          }
        });
    },
    getDate(s) {
      var page = this.page;
      var limit = 10;

      this.$axios
        .post("/index/buy/currentorder", { page: page, limit: limit })
        .then(res => {
          if (res.data.code == 0) {
            if (res.data.info && res.data.info.length > 0) {
              this.is_Show = true;
              this.is_Show1=false;
              if (s) {
                for (var i = 0; i < res.data.info.length; i++) {
                  let time=res.data.info[i].createtime;
                  res.data.info[i].createtime=time.substring(5,time.length);
                  this.items.push(res.data.info[i]);
                }
              } else {
                for (var i = 0; i < res.data.info.length; i++) {
                  let time=res.data.info[i].createtime;
                  res.data.info[i].createtime=time.substring(5,time.length);
                }
                this.items = res.data.info;
              }
              !s && res.data.info.length < 9
                ? (this.newxin = "已加载完所有数据")
                : "";
            } else {
              // //console.log(1)
              s
                ? (this.page--, (this.newxin = "已加载完所有数据"))
                : ((this.is_Show1 = true), (this.is_Show = false));
            }
          } else {
            s ? "" : ((this.is_Show1 = true), (this.is_Show = false));
          }
        });
    },
    buyin(type) {
      this.ws.send({id:1});

      if (type == 1) {
        if (!this.balance11 || !this.price1) {
          this.$createToast({txt: "价格数量必填",type: 'txt',time:1100}).show();
          return;
        }

        this.$axios
          .post("/index/buy/pushBuy", {
            type: type,
            number: this.balance11,
            price: this.price1,
            fieldtypes: this.types
          })
          .then(res => {
            if(res.data.msg){
              this.$createToast({txt: res.data.msg,type: 'txt',time:1100}).show();
              this.getDate();
            }
          });
      } else {
        if (!this.balance1 || !this.price) {
          this.$createToast({txt: "价格数量必填",type: 'txt',time:1100}).show();
          return;
        }

        this.$axios
          .post("/index/buy/pushBuy", {
            type: type,
            number: this.balance1,
            price: this.price,
            fieldtypes: this.types
          })
          .then(res => {
            res.data.msg ? (
              this.$createToast({txt: res.data.msg,type: 'txt',time:1100}).show(),
            this.getDate()) : "";
          });
      }
    },

    qhmm(type) {

      this.price = this.prices;
      this.price1 = this.prices;
      this.max10 = this.prices;
      this.isShow = !this.isShow;
      this.marks = { 20: "", 40: "", 60: "", 80: "" };
      this.markss = { 20: "", 40: "", 60: "", 80: "" };
      this.marks1 = 100;
      this.marks11 = 100;
      this.isActive = !this.isActive;
      if (type === 1) {
        //修改
        this.getbalanceDate(this.types);
        this.title = this.title1;
        this.count = (this.price * this.number).toFixed(4);
      } else if (type === 2) {
        this.title = this.title2;
        this.getbalanceDate("", this.types);
        // this.price = this.price2;
        this.count = (this.price * this.number).toFixed(4);
      } else {
        // this.price = this.price1;
        this.count = (this.price * this.number).toFixed(4);
      }
    },

    openLeft() {
      this.isLeft = "0";
      this.isPoup = true;
    },
    closeLeft() {
      this.isLeft = "-80%";
      this.isPoup = false;
    },
    showTc() {
      this.show = !this.show;
    },
    xz(e) {
      let that = this;
      that.iscolor = "#f7f9ff";
    },
    toClass1() {
      this.isClass = true;
    },
    toClass2() {
      this.isClass = false;
    },
    add_jd(arg1, arg2) {
      var r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
    },
    cut(arg1, arg2) {
      var r1, r2, m, n;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      //last modify by deeka
      //动态控制精度长度
      n = r1 >= r2 ? r1 : r2;
      return (arg1 * m - arg2 * m) / m;
    },
    add1() {
      if (this.price == "") {
        this.price = 0.0001;
      } else {
        let num = this.price;
        let num1 = this.add_jd(num, 0.0001);
        this.price = num1.toFixed(4);
        this.price1 = num1.toFixed(4);

        this.count = (this.price * this.number).toFixed(4);
      }
    },
    add2() {
      // if (this.balance11 == "") {
      //   this.balance11 = 0;
      // } else {
      let num = this.balance11;
      let num2 = this.add_jd(num, 1);
      this.balance11 = num2;

      let num3 = this.balance1;
      let num23 = this.add_jd(num3, 1);
      this.balance1 = num23;

      this.count = (this.price * this.balance11).toFixed(4);
      // }
    },
    dec1() {
      if (this.price == "" || this.price <= 0) {
        return false;
      } else {
        let num = this.price;
        let num11 = this.cut(num, 0.0001);
        this.price = num11.toFixed(4);
        this.price1 = num11.toFixed(4);

        this.count = (this.price * this.number).toFixed(4);
      }
    },
     //撤单
    cancellations(id){
      this.$axios.post("/index/buy/repeal",{
        orderid:id
      })
      .then(res=>{
        //console.log(res.data);
        if(res.data.code==0){
          this.$createToast({ txt: res.data.msg, type: "txt" ,time:1000}).show();
          setTimeout(()=>{
            this.getDate();
          },1000)
        }else if(res.data.msg){
          this.$createToast({ txt: res.data.msg, type: "txt" ,time:1000}).show();
        }
      })
    },
    dec2() {
      if (this.balance11 == "" || this.balance11 <= 0) {
        this.balance11 = 0;
      } else {
        let num = this.balance11;
        let num1 = this.cut(num, 1);
        this.balance11 = num1;

        let num2 = this.balance1;
        let num11 = this.cut(num2, 1);
        this.balance1 = num11;

        this.count = (this.price * this.balance11).toFixed(4);
      }
    },
    getnumberusdt() {
      this.count = (this.price * this.number).toFixed(4);
    },
    getpriceusdt() {
      this.count = (this.price * this.number).toFixed(4);
    },

    //下拉更新  vue下拉更新 下拉加载
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight == scrollHeight) {
        //请求数据接口
        this.page++;
        this.getDate(this.page);
        return false;
      }
    }
  },
  beforeDestroy(){
    this.tempros?clearInterval(this.tempros):'';
  },
  watch: {
    price(value) {
      value < 0 ? (value = 0) : "";
      //console.log(value, this.max10, "--0max10");
      // Number(value) > Number(this.max10)
      //   ? ((value = this.max10), (this.price = this.max10))
      //   : "";
      var wait = Number(value) * Number(this.balance1);
      var result = "";
      String(wait).indexOf(".") != -1
        ? (result = String(wait).substring(0, String(wait).indexOf(".") + 5))
        : (result = String(wait));
      this.usdtnumber = result;
    },
    balance1(value) {
      value=Number(value);
      value < 0 ? (value = 0) : "";
      //console.log(value, this.max11, "--0max10.0.");
      this.max11=Number(this.max11);
      value > this.max11
        ? ((value = this.max11), (this.balance1 = this.max11))
        : "";
      this.balance1 = Number(value);
      this.number = Number(value);
      // usdtnumber
      var divide = 0;
      for (var i = 0; i < this.coin.length; i++) {
        if (this.coin[i].content == this.coindui) {
          divide = Number(this.coin[i].last);
        }
      }
      var wait = Number(value) * Number(this.price);
      var result = "";
      String(wait).indexOf(".") != -1
        ? (result = String(wait).substring(0, String(wait).indexOf(".") + 5))
        : (result = String(wait));
      this.usdtnumber = result;
    },
    price1(value) {
      value=Number(value);
      value < 0 ? (value = 0) : "";
      //console.log(value, this.max10, "--0max10");
      // Number(value) > Number(this.max10)
      //   ? ((value = this.max10), (this.price1 = this.max10))
      //   : "";
      var wait = Number(value) * Number(this.balance11);
      var result = "";
      String(wait).indexOf(".") != -1
        ? (result = String(wait).substring(0, String(wait).indexOf(".") + 5))
        : (result = String(wait));
      this.usdtnumbers = result;
    },
    balance11(value) {
      value < 0 ? (value = 0) : "";
      this.marks11=Number(this.marks11)
      value > Number(this.marks11)
        ? ((value = this.marks11), (this.balance11 = this.marks11))
        : "";
      this.balance11 = Number(value);
      console.log(this.marks11, this.balance11, 'klk')
      this.number = Number(value);
      // usdtnumber
      var divide = 0;
      for (var i = 0; i < this.coin.length; i++) {
        if (this.coin[i].content == this.coindui) {
          divide = Number(this.coin[i].last);
        }
      }
      var wait = Number(value) * Number(this.price1);
      var result = "";
      String(wait).indexOf(".") != -1
        ? (result = String(wait).substring(0, String(wait).indexOf(".") + 5))
        : (result = String(wait));
      this.usdtnumbers = result;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.pull {
  font-size: 0.4rem;
  padding: 0.4rem 0;
}
.sl_mx .ant-slider-handle {
  // border: 0 !important;
  // width: 1.78571rem !important;
  //   height: 1.78571rem !important;
  //   z-index: 3 !important;
  //   background: url("../../assets/slideicon.png") no-repeat 50% !important;
  //   background-size: 1.78571rem 1.78571rem !important;
  //   box-shadow: none !important;
}
.wt_block {
  padding: 0.533333rem 0.4rem;
  border-bottom: 1px solid #f1f1f1;
  .head {
    .f-flex();
    justify-content: space-between;
    .head_left {
      .nsb1 {
        color: #e56337;
        font-size: 0.453333rem;
        font-weight: bold;
        paddgin-right: 0.2rem;
      }
      .nsb2 {
        color: #00bd84;
        font-size: 0.453333rem;
        font-weight: bold;
        paddgin-right: 0.2rem;
      }
      .ns2 {
        color: #000;
        font-size: 0.453333rem;
        font-weight: bold;
      }
      .ns3 {
        color: #a1a7b7;
        font-size: 0.32rem;
      }
      .ns4 {
        color: #a1a7b7;
        font-size: 0.32rem;
      }
    }
    .head_right {
      button {
        padding: 0 0.2rem;
      }
      .f-flex();
      span {
        color: #a1a7b7;
        font-size: 0.373333rem;
        font-weight: bold;
        padding-right: 0.266667rem;
      }
      img {
        width: 0.2rem;
        height: 0.3rem;
      }
    }
  }
  .content1 > .ns1 {
    width: 35%;
  }
  .content1 > .ns2 {
    width: 30%;
  }
  .content1 > .ns3 {
    width: 35%;
  }
  .content1 > .ns3 > .ws1 {
    text-align: right;
  }
  .content2 > .ns1 {
    width: 35%;
  }
  .content2 > .ns2 {
    width: 30%;
  }
  .content2 > .ns3 {
    width: 35%;
  }
  .content2 > .ns3 > .ws1 {
    text-align: right;
  }
  .content1 {
    margin-top: 0.533333rem;
    .f-flex();
    justify-content: space-between;
    .ns1 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns2 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns3 {
      text-align: right;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
        text-align: right;
      }
    }
  }
  .content2 {
    .f-flex();
    margin-top: 0.273333rem;
    justify-content: space-between;
    .ns1 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns2 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns3 {
      text-align: right;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
        text-align: right;
      }
    }
  }
}
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.trade {
  .trading_head {
    height: 1.2rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    border-bottom: 2px solid #f1f1f1;
    .left img {
      width: 0.453333rem;
      height: 0.426667rem;
    }
    .left,
    .trading_head .right {
      display: flex;
      display: -webkit-flex;
      align-items: center;
    }
    .left span {
      color: #0c0e1a;
      font-size: 0.453333rem;
      font-weight: bold;
      padding-left: 0.133333rem;
    }
    .right .ns1 {
      width: 0.613333rem;
      height: 0.48rem;
    }
    .right .ns2 {
      width: 0.453333rem;
      height: 0.426667rem;
      margin-left: 10px;
    }
  }

  .trading_content {
    width: 92%;
    margin: auto;
    margin-top: 0.266667rem;
  }
  .mrmc {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding-bottom: 0.88rem;
    .left {
      width: 4.586667rem;
    }
    .right {
      width: 4rem;
    }

    .left .ns1 {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
    }
    .left .ns1 {
      .mr_btn {
        width: 2.293333rem;
        height: 1.2rem;
        text-align: center;
        line-height: 1.2rem;
        background: url("../../assets/b_mr.png") no-repeat;
        background-size: 100% 100%;
        font-size: 0.4rem;
        color: #7e87a2;
        font-weight: bold;
      }
      .mc_btn {
        font-weight: bold;
        width: 2.293333rem;
        height: 1.2rem;
        text-align: center;
        line-height: 1.2rem;
        background: url("../../assets/b_mc.png") no-repeat;
        background-size: 100% 100%;
        color: #616370;
        font-size: 0.4rem;
      }

      .mr_btn.active,
      .mc_btn.active {
        color: #e66b41;
      }
      .mc_btn1.active {
        color: #18c78d;
      }
      .mr_btn.active {
        background: url("../../assets/a_mr.png") no-repeat;
        background-size: 100% 100%;
      }
      .mc_btn.active {
        background: url("../../assets/a_mc.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .right .ns1,
    .right .ws1 {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      position: relative;
    }
    .right .ns1 {
      margin-bottom: 0.2rem;
    }
    .right .ws1 {
      line-height: 2.44;
    }
    .right .ns1 span {
      color: #999999;
      font-size: 0.293333rem;
    }
    .right .ws1 .jg {
      color: red;
      font-size: 0.32rem;
      z-index: 1;
      text-align: left;
      width: 1rem;
    }
    .right .ws1 .jg1 {
      color: green;
    }
    .right .ws1 .sl {
      color: black;
      font-size: 0.32rem;
      z-index: 2;
    }
    .sltexe1 {
      text-align: right;
      min-width: 2rem;
    }
    .wt_btn {
      background: #e6e6e6;
      border-radius: 0.106667rem;
      width: 1.2rem;
      height: 0.4rem;
      text-align: center;
      line-height: 0.4rem;
      margin: 10px 0;
      padding-right: 0.14rem;
    }
    .num_add {
      border: 1px solid #c3c6cf;
      height: 47px;
      width: 100%;
      margin-top: 0.4rem;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: space-around;
    }
    .num_add div {
      font-size: 0.5rem;
      color: #616370;
    }
    .num_add .sl {
      width: 60%;
      text-align: center;
      font-size: 0.4rem;
      color: #333 !important;
      font-weight: bold;
      margin-top: 0.1rem;
    }
    .jian_cny,
    .add_cny {
      width: 20%;
      text-align: center;
      font-size: 0.666667rem !important;
    }
    .cny {
      font-size: 0.32rem;
      color: #aab2ca;
      margin-top: 0.2rem;
      margin-bottom: 0.4rem;
      text-align: left;
    }
    .num_add1 {
      border: 1px solid #c3c6cf;
      height: 47px;
      width: 100%;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: space-around;
    }
    .num_add1 div {
      font-size: 0.5rem;
      color: #616370;
    }
  }

  .sc_img {
    position: relative;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    background: #ededed;
    width: 100%;
    height: 4.746667rem;
  }
  .mrmc .num_add1 .sl1 {
    width: 60%;
    text-align: center;
    font-size: 0.4rem;
    margin-top: 0.12rem;
    color: black !important;
    font-weight: bold;
  }
  .jian_cny1,
  .add_cny1 {
    width: 20%;
    text-align: center;
    font-size: 0.666667rem !important;
  }
  .ze_usdt {
    border: 1px solid #999999;
    border-radius: 0.106667rem;
    height: 1.253333rem;
    width: 100%;
    text-align: center;
    line-height: 1.253333rem;
    color: #999999;
    font-size: 0.4rem;
    margin-top: 0.266667rem;
  }
  .usdt_mr {
    width: 100%;
    height: 1.253333rem;
    text-align: center;
    line-height: 1.253333rem;
    color: #fff;
    background: #18c78d;
    margin: 10px 0;
    font-size: 0.48rem;
    font-weight: bold;
    border-radius: 4px;
  }
  .usdt_mr1 {
    background: #e66b41;
  }
  .ky_usdt {
    border: 1px solid #999999;
    border-radius: 0.106667rem;
    height: 3.333333rem;
  }
  .ky_usdt .ny {
    width: 92%;
    margin: auto;
    line-height: 2.5;
  }
  .ky_usdt .ny > div {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }
  .wt_head {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    margin-bottom: 0.266667rem;
    span {
      font-size: 0.533333rem;
      font-weight: bold;
    }
  }
  .wt_head > a {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    color: #7e87a2;
    font-size: 0.426667rem;
  }
  .wt_head > div > img {
    width: 0.32rem;
    height: 0.346667rem;
    margin-right: 0.106667rem;
  }
  .wt_top {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #dddddd;
    height: 0.88rem;
    margin-bottom: 0.2rem;
  }
  .jg_list {
    line-height: 1.9;
  }
  .us_ze {
    margin-top: 0.32rem;
    span {
      font-size: 0.586667rem;
      color: #e35a3a;
      font-weight: bold;
    }
  }
  .nav-bg {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(27, 27, 27, 0.5);
  }
  .suosouk {
    position: relative;
    height: 0.666667rem;
    width: 5rem;
    margin: auto;
    margin-top: 0.213333rem;
    img {
      height: 0.346667rem;
      width: 0.346667rem;
      position: absolute;
      top: 0.15rem;
      margin-left: 0.2rem;
    }
  }
  .ss_nr {
    background-color: #e6e6e6 !important;
    height: 0.696667rem !important;
    line-height: 0.696667rem !important;
    border: none;
    padding-left: 0.8rem !important;
  }
  .mxx_list {
    .mxx_block {
      padding-left: 4%;
      padding-right: 4%;
      font-size: 0.426667rem;
      font-weight: bold;
      color: #000;
      border-bottom: 1px solid #e6e6e6;
      height: 1.333333rem;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .nav-box {
    z-index: 999;
    position: fixed;
    top: 0;
    left: -80%;
    width: 80%;
    height: 100%;
    transition: ease left 0.4s;
  }
  .nav-content {
    font-size: 0.4rem;
    width: 100%;
    height: 100%;
    background: #fff;
    .title {
      .actions {
        color: #e56337;
        border-bottom: 3px solid #e56337;
      }
      padding-left: 4%;
      padding-right: 4%;
      height: 1.333333rem;
      .f-flex();
      justify-content: space-between;
      .left {
        height: 100%;
        line-height: 1.333333rem;
      }
      .right {
        height: 100%;
        line-height: 1.333333rem;
        .f-flex();
        img {
          margin-left: 0.4rem;
          width: 0.453333rem;
          height: 0.426667rem;
        }
      }
    }
  }
  .bz_title {
    font-size: 0.4rem;
    color: #333;
    margin-bottom: 0.4rem;
    margin-left: 0.266667rem;
  }
  .suosouk {
    position: relative;
    height: 0.666667rem;
    width: 5rem;
    margin: auto;
    margin-top: 0.213333rem;
  }
  .bg_color {
    background-color: #effbf9;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    width: 50%;
  }
  .wswc {
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    top: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    z-index: 1;
  }
  .m-megess {
    background: #fff;
    border-radius: 0.133333rem;
    position: absolute;
    right: 4%;
    top: 1.4rem;
    z-index: 9999;
    padding: 0.64rem 1.6rem 0.34rem 0.4rem;
    font-size: 0.426667rem;
    .m-block {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      line-height: 2;
      color: #333;
      margin-bottom: 0.453333rem;
      img {
        width: 0.56rem;
        display: block;
        margin-right: 0.32rem;
      }
    }
  }
}

.reveal {
  display: flex;
  justify-content: space-between;
  margin-top: -0.5rem;
  margin-bottom: 0.56rem;
}

.trade .usdt_mr:active{
  background: #009060;
}
.trade .usdt_mr1:active {
    background: #b72f00;
}
</style>

